<template>
  <div class="app-container">
    <el-row :gutter="12" style="height: 100%">
      <el-col :xs="24" :sm="24" :md="6" :lg="6">
        <el-card class="box-card" style="height: 100%">
          <template #header>
            <div class="card-header">
              <span>厂区</span>
            </div>
          </template>
          <el-tree
            :data="riskImgaeOption"
            :props="{ id: 'riskImgId', label: 'riskDeptName', children: '' }"
            :expand-on-click-node="false"
            ref="riskImageRef"
            :current-node-key="checkNode"
            node-key="riskImgId"
            highlight-current
            :default-expand-all="true"
            @node-click="handleNodeClick"
          >
            <template class="custom-tree-node" #default="{ node, data }">
              <div
                style="
                  display: flex;
                  align-items: flex-start;
                  justify-content: space-between;
                  width: 100%;
                "
              >
                <span style="padding-left: 4px">{{ node.label }}</span>
              </div>
            </template>
          </el-tree>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="18" :lg="18">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>风险空间分布图</span>
              <el-button
                type="primary"
                plain
                icon="Edit"
                @click="handleUpdate"
                v-hasPermi="['system:menu:add']"
                >修改</el-button
              >
            </div>
          </template>
          <el-image
            style="width: 100%; height: 100%; object-fit: contain"
            :src="url"
            :preview-src-list="srcList"
            :zoom-rate="1.2"
            fit="cover"
          />
        </el-card>
      </el-col>
    </el-row>

    <!--修改风险四色图-->
    <el-dialog
      :title="title"
      v-model="open"
      width="60%"
      append-to-body
      close="closeDialog"
    >
      <el-form ref="imageRef" :model="imageForm" :rules="rules" style="margin-top: 18px">
        <el-form-item label="风险四色图:" label-width="140px" prop="imageUrl">
          <el-upload
            action="#"
            v-model="imageForm.riskImgSrc"
            list-type="picture-card"
            :auto-upload="false"
            :before-upload="beforeUpload"
            :on-change="changeFile"
            :file-list="fileList"
          >
            <el-icon><Plus /></el-icon>

            <template #file="{ file }">
              <div>
                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
              </div>
            </template>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">保存</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { listRiskImage, updateRiskImage } from "@/api/prevent/risk/image";
import { uploadFile } from "@/api/common/upload";
const checkedImg = ref([]);
const riskImgaeOption = ref([]);
const url = ref("");
const srcList = ref([]);
const riskImageRef = ref(null);
const checkNode = ref(""); //选中的节点
const open = ref(false);
const title = ref("");
const fileList = ref([]);
const data = reactive({
  imageForm: {},
  rules: {},
});
const { imageForm, rules } = toRefs(data);
const { proxy } = getCurrentInstance();
/** 节点单击事件 */
function handleNodeClick(data, node) {
  srcList.value = [];
  reset();
  imageForm.value = data;
  url.value = data.riskImgSrc;
  srcList.value.push(url.value);
  fileList.value = [];
  fileList.value.push({ url: data.riskImgSrc });
  //console.log(riskImageRef.value.getCurrentNode());
}

/** 处理图片变化*/
function changeFile(userFile, files) {
  fileList.value = [];
  fileList.value.push(userFile);
  const formData = new FormData();
  formData.append("file", userFile.raw);
  uploadFile(formData).then((response) => {
    imageForm.value.riskImgSrc = response.data.urls;
  });
}
/** 图片上传前 */
function beforeUpload(uploadFile) {
  console.log(uploadFile);
}
/** 取消修改 */
function cancel() {
  open.value = false;
}

/** 重置表单 */
function reset() {
  imageForm.value = {};
  proxy.resetForm("imageRef");
}

/** 修改风险四色图 */
function handleUpdate() {
  open.value = true;
  title.value = "修改风险四色图";
  //console.log(imageForm.value);
}

/** 提交 */
function submitForm() {
  console.log(imageForm.value);
  updateRiskImage(imageForm.value).then((response) => {
    proxy.$modal.msgSuccess("修改成功");
    open.value = false;
    getRiskImageList();
  });
}

/**获取风险四色图列表 */
function getRiskImageList() {
  listRiskImage().then((response) => {
    riskImgaeOption.value = response.data;
    url.value = response.data[0].riskImgSrc;
    srcList.value.push(url.value);
    srcList.value.push(url.value);
    fileList.value = [];
    fileList.value.push({ url: url.value });
    imageForm.value = response.data[0];
    if (response.data.length > 0) {
      checkNode.value = response.data[0].riskImgId;
    }
    //checkedImg.value.push(riskImgaeOption.value[0].riskImgId);
  });
}
getRiskImageList();

setTimeout(() => {
  riskImageRef.value.setCurrentKey(riskImgaeOption.value[0].riskImgId);
}, 200);
</script>
<style scoped>
.demo-image__error .image-slot {
  font-size: 30px;
}
.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}
.demo-image__error .el-image {
  width: 100%;
  height: 200px;
}
</style>
